<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>网格系统 - Grid System</title>
    <link rel="stylesheet" href="../assets/normalize.css" />
    <link rel="stylesheet" href="../assets/bootstrap.min.css" />
    <link rel="stylesheet" href="../assets/common.css" />
  </head>
  <body>
    <h1 class="subject-title">
      使用我们强大的移动优先flexbox网格，通过十二列系统、六个默认响应式层级、Sass变量和混合以及数十个预定义类，构建各种形状和大小的布局。
    </h1>

    <section class="section-area">
      <h1 class="area-title">相等宽度</h1>
      <h2>
        下面的示例使用我们预定义的网格类在所有设备和视口中创建了三个等宽的列。这些列位于父级.container所在页面的中心。
      </h2>
      <div class="container" style="background-color: burlywood">
        <div class="row">
          <div class="col" style="background-color: lightcoral">Column</div>
          <div class="col" style="background-color: lightblue">Column</div>
          <div class="col" style="background-color: lightgreen">Column</div>
        </div>
      </div>
    </section>

    <section class="section-area">
      <h1 class="area-title">设置一列宽度</h1>
      <h2>
        自动布局对于flexbox网格列也意味着你可以设置一列的宽度，并让相邻列自动调整大小围绕它。你可以使用预定义的网格类（如下所示）、网格混合器或内联宽度。请注意，无论中心列的宽度如何，其他列都将调整大小。
      </h2>
      <div class="container text-center">
        <div class="row">
          <div class="col" style="background-color: lightcoral">1 of 3</div>
          <div class="col-6" style="background-color: lightblue">
            2 of 3 (wider)，占据6个网格
          </div>
          <div class="col" style="background-color: lightgreen">3 of 3</div>
        </div>
        <div class="row">
          <div class="col" style="background-color: lightcoral">1 of 3</div>
          <div class="col-5" style="background-color: lightblue">
            2 of 3 (wider)，占据5个网格
          </div>
          <div class="col" style="background-color: lightgreen">3 of 3</div>
        </div>
      </div>
    </section>

    <section class="section-area">
      <h1 class="area-title">可变宽度内容</h1>
      <h2>使用col-{断点}-auto类根据其内容的自然宽度来调整列的大小。</h2>
      <div class="container text-center">
        <div class="row justify-content-md-center">
          <div class="col col-lg-2" style="background-color: lightcoral">
            1 of 3
          </div>
          <div class="col-md-auto" style="background-color: lightblue">
            Variable width content
          </div>
          <div class="col col-lg-2" style="background-color: lightgreen">
            3 of 3
          </div>
        </div>
        <div class="row">
          <div class="col" style="background-color: lightcoral">1 of 3</div>
          <div class="col-md-auto" style="background-color: lightblue">
            Variable width content
          </div>
          <div class="col col-lg-2" style="background-color: lightgreen">
            3 of 3
          </div>
        </div>
      </div>
    </section>

    <section class="section-area">
      <h1 class="area-title">行列</h1>
      <h2>
        使用响应式.row-cols-*类来快速设置最适合呈现内容和布局的列数。虽然正常的.col-*类适用于单个列（例如.col-md-4），但行列类是在父级.row上设置的作为快捷方式。通过使用.row-cols-auto，您可以让列保持其自然宽度。使用这些行列类来快速创建基本网格布局或控制卡片布局。
      </h2>
      <h2>使用这些行和列的类来快速创建基本网格布局或控制卡片布局。</h2>
      <div class="container text-center">
        <h3>4个列，1行2列，会分层2行，每行2列</h3>
        <div class="row row-cols-2">
          <div class="col" style="background-color: lightcoral">Column</div>
          <div class="col" style="background-color: lightblue">Column</div>
          <div class="col" style="background-color: lightgreen">Column</div>
          <div class="col" style="background-color: lightyellow">Column</div>
        </div>
      </div>
      <hr />
      <div class="container text-center">
        <h3>4个列，1行3列，会分成2行，第1行3列，第2行1列</h3>
        <div class="row row-cols-3">
          <div class="col" style="background-color: lightcoral">Column</div>
          <div class="col" style="background-color: lightblue">Column</div>
          <div class="col" style="background-color: lightgreen">Column</div>
          <div class="col" style="background-color: lightyellow">Column</div>
        </div>
      </div>
      <div class="container text-center">
        <h3>4个列自动分行</h3>
        <div class="row row-cols-auto">
          <div class="col" style="background-color: lightcoral">Column</div>
          <div class="col" style="background-color: lightblue">Column</div>
          <div class="col" style="background-color: lightgreen">Column</div>
          <div class="col" style="background-color: lightyellow">Column</div>
        </div>
      </div>
      <div class="container text-center">
        <h3>4个列，1行4列，会分成1行</h3>
        <div class="row row-cols-4">
          <div class="col" style="background-color: lightcoral">Column</div>
          <div class="col" style="background-color: lightblue">Column</div>
          <div class="col" style="background-color: lightgreen">Column</div>
          <div class="col" style="background-color: lightyellow">Column</div>
        </div>
      </div>
      <div class="container text-center">
        <h3>
          4个列，1行4列，每列4等分，但第3列指定了占据6个网格，所以会分成2行
        </h3>
        <div class="row row-cols-4">
          <div class="col" style="background-color: lightcoral">Column</div>
          <div class="col" style="background-color: lightblue">Column</div>
          <div class="col-6" style="background-color: lightgreen">
            指定占据6个网格
          </div>
          <div class="col" style="background-color: lightyellow">Column</div>
        </div>
      </div>
    </section>
  </body>
</html>
